<template>
  <!-- 最外层的容器 -->
  <view class="my-settle-container">
     <!-- 全选区域 -->
      <label class="radio" @click="changeAllState">
        <radio color="#C00000" :checked="isFullCheck" /><text>全选</text>
      </label>
      <!-- 合计区域 -->
      <view class="amount-box">
        合计:<text class="amount">￥{{checkedGoodsAmount}}</text>
      </view>
      <!-- 结算按钮 -->
      <view class="btn-settle"  @click="settlement">结算({{checkedCount}})</view>
  </view>
</template>

<script>
import cloudApi from "@/common/cloundApi.js"
import { mapGetters,mapMutations,mapState } from 'vuex'
export default {
  data() {
    return {
      // 倒计时的秒数
      seconds: 3,
      // 定时器的 Id
      timer: null
    }
  },
  methods:{
	   ...mapMutations('m_cart', ['updateAllGoodsState','deleteAllGoods']),
	   changeAllState() {
	      // 修改购物车中所有商品的选中状态
	      // !this.isFullCheck 表示：当前全选按钮的状态取反之后，就是最新的勾选状态
	      this.updateAllGoodsState(!this.isFullCheck)
	    },
		// 点击了结算按钮
		async settlement() {
		  // 1. 先判断是否勾选了要结算的商品
		  if (!this.checkedCount) return uni.$showMsg('请选择要结算的商品！')
		  // 2. 再判断用户是否选择了收货地址
		  if (JSON.stringify(this.address)=== '{}') return uni.$showMsg('请选择收货地址！')
			const [err, succ] = await uni.showModal({
				title: '提示',
				content: '确认支付吗？'
			  }).catch(err => err)
			
			  if (succ && succ.confirm) {
				// 用户确认了的操作
					this.payOrder()	
			  }
		},
    
    // 微信支付
    async payOrder() {
      // 1. 创建订单
	  cloudApi.call({
	  	name:"order",
	  	data:{
	  		action:"create",
			username:this.userinfo.nickName,
			order_price: this.checkedGoodsAmount,
			consignee_addr: this.address,
			goods: this.cart.map(x => ({ goods_id: x.goods_id,goods_name: x.goods_name,goods_small_logo: x.goods_small_logo, goods_number: x.goods_count, goods_price: x.goods_price }))
	  	},
	  	success:(res)=>{
			uni.removeStorageSync('cart');
			this.deleteAllGoods()
	  		return uni.$showMsg('创建订单成功！')
	  	}
	  })	
	}
  },
  computed: {
	  // 将 total 映射到当前组件中
      ...mapGetters('m_cart', ['checkedCount', 'total', 'checkedGoodsAmount']),
	  ...mapState('m_user', ['token','userinfo','address']),
      ...mapState('m_cart',['cart']),
	  // 是否全选
	  isFullCheck() {
		return this.total === this.checkedCount
	  },
    }
}
</script>

<style lang="scss">
.my-settle-container {
  /* 底部固定定位 */
  position: fixed;
  bottom: 0;
  left: 0;
  /* 设置宽高和背景色 */
  width: 100%;
  height: 50px;
  background-color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 5px;
  font-size: 14px;
  .radio {
      display: flex;
      align-items: center;
    }
  
    .amount {
      color: #c00000;
    }
  
    .btn-settle {
      height: 50px;
      min-width: 100px;
      background-color: #c00000;
      color: white;
      line-height: 50px;
      text-align: center;
      padding: 0 10px;
    }
}
</style>